<template>
    <div class="container">
        <div class="container_son" :style="{ height: pageHeight - 120 + 'px' }"
            style="overflow-y: scroll; padding: 0px; box-sizing: border-box;">
            <div class="out_image">
                <el-card v-for="item in imagesList" :key="item.id" :body-style="{
                    padding: '0px'
                }" class="card" shadow="hover">
                    <img :src="item.url" alt="">
                </el-card>

            </div>
        </div>

        <div :style="{ height: 60 + 'px' }" class="flex justify-center">
            <el-pagination v-model:currentPage="currentPage" @change="handlePage" @current-change="handleCurrentChange"
                size="small" :total="totalImageNumber" background layout="prev, next" />
        </div>
    </div>

</template>
<script setup>
import { onMounted, ref } from 'vue';
import { getPictureList } from '../../../api/image';
let pageHeight = 0;
pageHeight = window.innerHeight - 158 || document.body.clientHeight;
const currentPage = ref(1);
const images_id = ref(168);
const totalImageNumber = ref(0);
const imagesList = ref([]);

const handleCurrentChange = (e) => {
    currentPage.value = e;
}
const changeImageId = (id) => {
    console.log('当前选中的图片分类id', id);
    images_id.value = id;
    getData(1);
}

/**获取当前选中的页码 */
const handlePage = (e) => {
    getData(e);
}

const getData = (pageNumber) => {
    console.log('打印imageId', images_id.value);
    getPictureList(images_id.value, pageNumber).then(({ list, totalCount }) => {
        // console.log('打印列表res', list, totalCount);
        totalImageNumber.value = totalCount
        imagesList.value = list;
        console.log('打印图片列表', imagesList.value);
        console.log('打印总图片数', totalCount);

    })
}

defineExpose({
    changeImageId,
})
onMounted(() => {
    getData(1);
})
</script>
<style scoped lang='scss'>
.container {
    .container_son {
        display: flex;
        justify-content: center;

        .out_image {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            gap: 30px;
            padding: 10px;
            box-sizing: border-box;

            .in_image {
                display: flex;
                justify-content: center;
                align-items: start;
                border: 1px solid black;

                .card {
                    display: flex;
                    padding: 0px !important;
                    // align-items: start;

                    img {
                        max-height: 200px;
                        width: auto;
                    }
                }


            }
        }
    }

}
</style>
